<template>
	<view class="order-container">
		<!-- 头部信息 -->
		<view class="header">
			<view class="address-section" @click="selectAddress">
				<view class="location-icon">📍</view>
				<text class="address-text">{{currentAddress || '选择收货地址'}}</text>
				<view class="arrow-icon">›</view>

				<!-- 右侧-切换取货方式 -->
				<view class="delivery-methods">
					<view class="delivery-item" :class="{active: activeDelivery === 0}"
						@click.stop="selectDeliveryMethod(0)">
						<text>自取</text>
					</view>
					<view class="delivery-item" :class="{active: activeDelivery === 1}"
						@click.stop="selectDeliveryMethod(1)">
						<text>外卖</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content">
			<!-- 左侧分类 -->
			<scroll-view class="category-scroll" scroll-y>
				<view class="category-item" v-for="(item, index) in categoryList" :key="index"
					:class="{active: activeCategory === index}" @click="switchCategory(index)">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>

			<!-- 右侧商品列表 -->
			<scroll-view class="product-scroll" scroll-y>
				<view class="product-section" v-for="section in productSections" :key="section.id">
					<view class="section-header">
						<text class="section-title">{{section.name}}</text>
					</view>
					<view class="product-list">
						<view class="product-card" v-for="product in section.products" :key="product.id"
							@click="navigateToProductDetail(product.id)">
							<image class="product-image" :src="product.image" mode="aspectFill"></image>
							<view class="product-info">
								<text class="product-name">{{product.name}}</text>
								<text class="product-desc">{{product.description}}</text>
								<text class="product-price">¥{{product.price}}</text>
							</view>
							<view class="add-btn" @click.stop="selectProduct(product)">
								<text>+</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商品规格弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<image class="modal-product-image" :src="selectedProduct?.image" mode="aspectFill"></image>
					<view class="modal-product-info">
						<text class="modal-product-name">{{selectedProduct?.name}}</text>
						<text class="modal-product-price">¥{{selectedProduct?.price}}</text>
					</view>
					<view class="close-btn" @click="closeModal">×</view>
				</view>

				<view class="spec-section">
					<text class="spec-title">规格</text>
					<view class="spec-options">
						<view class="spec-item" v-for="(spec, index) in productSpecs" :key="index"
							:class="{active: selectedSpec === index}" @click="selectSpec(index)">
							<text>{{spec}}</text>
						</view>
					</view>
				</view>

				<view class="quantity-section">
					<text>数量</text>
					<view class="quantity-control">
						<view class="quantity-btn" :class="{disabled: productQuantity <= 1}" @click="decreaseQuantity">-
						</view>
						<text class="quantity">{{productQuantity}}</text>
						<view class="quantity-btn" @click="increaseQuantity">+</view>
					</view>
				</view>

				<view class="confirm-btn" @click="addToCart">确定</view>
			</view>
		</view>

		<!-- 底部结算按钮 -->
		<view class="bottom-bar" v-if="cartCount > 0">
			<view class="cart-info">
				<text class="cart-count">{{cartCount}}件商品</text>
				<text class="cart-total">合计: ¥{{cartTotal}}</text>
			</view>
			<view class="checkout-btn" @click="navigateToCart">立即结算</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 地址相关
	const currentAddress = ref('')

	// 配送方式
	const deliveryMethods = ref([{
			name: '自取',
			desc: '到店自取更快捷'
		},
		{
			name: '外卖',
			desc: '外送到家更方便'
		}
	])
	const activeDelivery = ref(0)

	// 分类数据
	const categoryList = ref([{
			name: '全部'
		},
		{
			name: '热销'
		},
		{
			name: '新品'
		},
		{
			name: '套餐'
		},
		{
			name: '饮品'
		},
		{
			name: '小吃'
		},
		{
			name: '甜点'
		},
		{
			name: '咖啡'
		},
		{
			name: '果汁'
		},
		{
			name: '冰品'
		}
	])

	const activeCategory = ref(0)

	// 商品数据
	const productSections = ref([{
			id: 1,
			name: '热销推荐',
			products: [{
					id: 1,
					name: '经典奶茶',
					price: '15.00',
					description: '醇香浓郁',
					image: '/static/goods/goods01.jpg'
				},
				{
					id: 2,
					name: '拿铁咖啡',
					price: '22.00',
					description: '香醇顺滑',
					image: '/static/goods/goods02.jpg'
				},
				{
					id: 3,
					name: '水果茶',
					price: '18.00',
					description: '新鲜水果',
					image: '/static/goods/goods03.jpg'
				}
			]
		},
		{
			id: 2,
			name: '新品上市',
			products: [{
					id: 4,
					name: '芝士奶盖',
					price: '25.00',
					description: '浓郁芝士',
					image: '/static/goods/goods04.jpg'
				},
				{
					id: 5,
					name: '抹茶拿铁',
					price: '20.00',
					description: '日式抹茶',
					image: '/static/goods/goods05.jpg'
				}
			]
		}
	])

	// 商品规格
	const productSpecs = ref(['标准', '中杯', '大杯', '热饮', '冰饮'])
	const selectedSpec = ref(0)

	// 商品详情弹窗
	const showModal = ref(false)
	const selectedProduct = ref(null)
	const productQuantity = ref(1)

	// 购物车数据
	const cartItems = ref([])

	// 计算属性
	const cartCount = computed(() => {
		return cartItems.value.reduce((total, item) => total + item.quantity, 0)
	})

	const cartTotal = computed(() => {
		return cartItems.value.reduce((total, item) => total + (parseFloat(item.price) * item.quantity), 0)
			.toFixed(2)
	})

	// 方法
	const selectAddress = () => {
		// 模拟选择地址
		currentAddress.value = '北京市朝阳区望京SOHO'
		
		uni.navigateTo({
			url: '/pages_my/address/index'
		})
	}

	const selectDeliveryMethod = (index) => {
		activeDelivery.value = index
	}

	const switchCategory = (index) => {
		activeCategory.value = index
	}

	const selectProduct = (product) => {
		selectedProduct.value = product
		selectedSpec.value = 0
		productQuantity.value = 1
		showModal.value = true
	}

	const selectSpec = (index) => {
		selectedSpec.value = index
	}

	const increaseQuantity = () => {
		productQuantity.value++
	}

	const decreaseQuantity = () => {
		if (productQuantity.value > 1) {
			productQuantity.value--
		}
	}

	const closeModal = () => {
		showModal.value = false
	}

	const addToCart = () => {
		if (!selectedProduct.value) return

		const existingItem = cartItems.value.find(item => item.id === selectedProduct.value.id && item.spec ===
			productSpecs.value[selectedSpec.value])
		if (existingItem) {
			existingItem.quantity += productQuantity.value
		} else {
			cartItems.value.push({
				...selectedProduct.value,
				spec: productSpecs.value[selectedSpec.value],
				quantity: productQuantity.value
			})
		}

		closeModal()
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		})
	}

	const navigateToCart = () => {
		uni.navigateTo({
			url: '/pages_shopcar/submitOrder/index'
		})
	}

	const navigateToProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages_order/orderInfo/index?id=${id}`
		})
	}
	onLoad(() => {
		console.log('点单页面加载')
	})
</script>

<style scoped>
	.order-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	/* 头部样式 */
	.header {
		background: white;
		padding: 20rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	.address-section {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;


		.location-icon {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		.address-text {
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}


		.delivery-methods {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
		}

		.delivery-item {
			padding: 10rpx 30rpx;
			margin-left: 30rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #666;
			background: #f8f8f8;
		}

		.delivery-item.active {
			background: #ff6b6b;
			color: white;
		}
	}

	.arrow-icon {
		font-size: 32rpx;
		color: #999;
	}



	/* 主内容区 */
	.main-content {
		display: flex;
		height: calc(100vh - 280rpx);
	}

	/* 左侧分类 */
	.category-scroll {
		width: 180rpx;
		background: #f8f8f8;
	}

	.category-item {
		padding: 30rpx 20rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #666;
	}

	.category-item.active {
		background: white;
		color: #ff6b6b;
		font-weight: bold;
		position: relative;
	}

	.category-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 40rpx;
		background: #ff6b6b;
	}

	/* 右侧商品列表 */
	.product-scroll {
		flex: 1;
		background: #f1f2ed;
	}

	.product-section {
		background: #f1f2ed;
		padding: 30rpx 20rpx;
	}

	.section-header {
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.product-list {
		background: white;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.product-card {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.product-card:last-child {
		border-bottom: none;
	}

	.product-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.product-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.product-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.product-desc {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 10rpx;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.add-btn {
		width: 60rpx;
		height: 60rpx;
		background: #ff6b6b;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: white;
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
	}

	.modal-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.modal-product-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.modal-product-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.modal-product-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.modal-product-price {
		font-size: 36rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.close-btn {
		font-size: 48rpx;
		color: #999;
		padding: 0 20rpx;
	}

	.spec-section {
		margin-bottom: 30rpx;
	}

	.spec-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.spec-options {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-item {
		padding: 15rpx 30rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		font-size: 28rpx;
		color: #666;
	}

	.spec-item.active {
		border-color: #ff6b6b;
		color: #ff6b6b;
	}

	.quantity-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		background: #f8f8f8;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #666;
	}

	.quantity-btn.disabled {
		color: #ccc;
	}

	.quantity {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn {
		margin: 30rpx 0;
		height: 90rpx;
		background: #ff6b6b;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 15rpx rgba(255, 107, 107, 0.3);
	}

	/* 底部结算按钮 - 高于底部导航 */
	.bottom-bar {
		position: fixed;
		/* #ifdef H5 */
			bottom: 120rpx;
		/* #endif */
		/* #ifdef APP */
			bottom: 10rpx;
		/* #endif */
		left: 100rpx;
		right: 30rpx;
		height: 120rpx;
		background: white;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		z-index: 99;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 70rpx;
	}

	.cart-info {
		flex: 1;
	}

	.cart-count {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.cart-total {
		font-size: 32rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.checkout-btn {
		width: 200rpx;
		height: 80rpx;
		background: #675a55;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 15rpx rgba(255, 107, 107, 0.3);
	}
</style>